<template>
  <div class="carousel">
    <div>
      <b-carousel
        id="carousel-1"
        v-model="slide"
        :interval="5000"
        controls
        indicators
        background="#ababab"
        img-width="1024"
        img-height="480"
        style="text-shadow: 1px 1px 2px #333"
        @sliding-start="onSlideStart"
        @sliding-end="onSlideEnd"
      >
        <!-- Text slides with image -->
        <b-carousel-slide
          caption="First slide"
          text="Nulla vitae elit libero, a pharetra augue mollis interdum."
          img-src="https://picsum.photos/1024/480/?image=52"
        ></b-carousel-slide>

        <!-- Slides with custom text -->
        <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
          <h1>Hello world!</h1>
        </b-carousel-slide>

        <!-- Slides with image only -->
        <b-carousel-slide
          img-src="https://picsum.photos/1024/480/?image=58"
        ></b-carousel-slide>
          <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=55">
        </b-carousel-slide>
        <!-- <b-carousel-slide>
          <template #img>
            <img
              class="d-block img-fluid "
              width="1024"
              height="480"
              src="https://picsum.photos/1024/480/?image=55"
              alt="image slot"
            />
          </template>
        </b-carousel-slide> -->
      </b-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "carousel",
  data() {
    return {
      slide: 0,
      sliding: true,
    };
  },

  methods: {
    onSlideStart(slide) {
      slide
      this.sliding = true;
    },
    onSlideEnd(slide) {
      slide;
      this.sliding = false;
    },
  },
};
</script>

<style lang="scss">
.carousel {
    margin-bottom: 10px;
  .sr-only {
    display: none;
  }
}
</style>
